<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <title>Login</title>
    <meta charset="utf-8">
    <link rel="icon" href="../homepage/img/logo.png">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/util.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <style>
        .hint{
            color: #86a0f3;
            font-size: 15px;
        }

    </style>
    <link rel="stylesheet" href="../homepage/homepage.css">
</head>
<body>
<div class="limiter">
    <div class="container-login100">
        <div class="wrap-login100">
            <div class="login100-form-title" style="background-image: url(images/bg-01.jpg);">
                <span class="login100-form-title-1">登 录</span>
            </div>

            <form class="login100-form validate-form" action="../homepage/homepage.html" method="post">
                <div class="wrap-input100 validate-input m-b-26" data-validate="用户名不能为空">
                    <span class="label-input100">用户名</span>
                    <input class="input100" type="text" name="id" placeholder="请输入工号" id="myid">
                    <span class="focus-input100"></span>
                </div>

                <div class="wrap-input100 validate-input m-b-18" data-validate="密码不能为空">
                    <span class="label-input100">密码</span>
                    <input class="input100" type="password" name="password" placeholder="请输入密码" id="mypwd">
                    <span class="focus-input100"></span>
                </div>

                <div class="flex-sb-m w-full p-b-30">
                    <div class="contact100-form-checkbox">
                        <input class="input-checkbox100" id="ckb1" type="checkbox" name="remember-me">
                        <label class="label-checkbox100" for="ckb1">记住我</label>
                    </div>

                </div>

                <div class="container-login100-form-btn">
                    <input class="login100-form-btn" name="submit" type="button" value="登录" id="checkl" >
                </div>
            </form>
        </div>
    </div>
</div>

<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/main.js"></script>
<script>
    $(document).ready(function() {
        $('#myid').keyup(function (e) {
            validateUser($(e.target).val())

        } )

        function doLogin(id, password) {
            $.ajax({
                //url:'../api/login.json',
                url:'/Counselor_System/login/Login',
                type:'POST',
                dataType:'json',
                data:{
                    id:id,
                    password:password
                },
                success:function (res) {
                    // console.log(res)
                    if (res.code==0){
                        location.href = '../homepage/homepage.html';
                        localStorage.setItem('name', res.data.name);
                        localStorage.setItem('power', res.data.power);
                        localStorage.setItem('id', res.data.id);
                    }else{
                        showError(res.msg)
                    }
                },
                error:function (res) {
                    console.log(res)
                }
            })
        }
        $('#checkl').click(function () {
            var id = $("#myid").val();
            var pwd = $("#mypwd").val();

            validateUser(id, pwd)
            // doLogin(id, pwd)
        })

        function validateUser(id, pwd) {
            //去除首尾空格
            id.trim();
            //验证
            // username.replace(/(^\s*)|(\s*$)/g, "");
            var error = '';
            if (!id) {
                error = '请输入用户名'
            } else if (!pwd) {
                error = '请输入密码'
            }
            //验证内容
            if (!error) {
                error = doLogin(id, pwd);
            }else {
                showError(error)
            }

        }
        function showError(error) {
            //显示结果
            //  去除上次的内容
            var old = $('.hint').text('')
            if (error) {
                var a = $("<p></p>").html(error).addClass('hint')
                $("form").after(a);
            }
        }
    })
</script>



</body>
</html>